<template>
  <div>

    <!-- 留言 -->
    <Modal
      v-model="liuYanKk"
      title="留言"
      :footer-hide="true"
      :mask-closable="false"
      width="850"
      @on-visible-change="vAhange"
      class-name="vertical-center-modal"
    > 
      <div class="liuYanBox">
          <div class="yanBox" ref="yanBox" :style="`max-height: ${$app.winHeight-500}px;`">

            <!-- user_type 1 2猫方 ，3用户-->
            <Row :gutter="15" class="zuHe" v-for="(val,i) in contactLogs" :key="'contactLogs'+i"  >
              <Col :span="2" class="textRight">
                <template v-if="val.user_type !=3 ">
                  <img :src="logoMin2" class="cover radius100 inlineBlock" style="background-color:#f4f4f4;padding:6px;" width="45" height="45">
                </template>
                <template v-else>
                  <span class="visHidden">-</span>
                </template>
              </Col>
              <Col :span="20" >
                <div class="c999 f_14 marginB5" :class="(val.user_type==3) ? ' textRight ':''">{{val.created_at}}</div>
                <div class="huiFuBox " :class="(val.user_type==3) ? ' bgBlue cWhite pullRight':''">
                  <!-- 1文字,2图片,3附件 -->
                  <template v-if="val.msg_type==1">
                    {{val.message}}
                  </template>
                  <template v-else-if="val.msg_type==2">
                    
                    <div class="JC_img borderNone pointer relative   " style="height:auto;">
                      <img :src="$app.getVal_filePath(val)" class="contain  width100 " @click="$app.openWindow($app.getVal_filePath(val))" style="min-height:50px; max-height:150px;" >
                    </div>
                  </template>
                  <template v-else-if="val.msg_type==3">
                    <div class="textLine" @click="$app.openWindow(val.file_path)">
                      <i class="iconfont f_16 inlineBlock marginR5" :class="$app.fileIcon(val)"></i>
                      <span class="  ">{{$app.urlToName(val)+'.'+$app.toLower(val)}}</span>
                    </div>
                  </template>
                  
                </div>
              </Col>
              <Col :span="2">
                <template v-if="val.user_type ==3 ">
                  <img :src="$store.state.F_cat.userImg" class="cover radius100 inlineBlock" width="45" height="45">
                </template>
                <template v-else>
                  <span class="visHidden">-</span>
                </template>
              </Col>
            </Row>



          </div>
          <div class="yanBottom">
            <Row :gutter="10" >
                <Col :span="20">
                  <Input 
                    type="textarea" 
                    :rows="2" 
                    v-model="sendLogsVal" 
                    ref="sendLogsVal" 
                    placeholder="请输入内容..." 
                    size="large" 
                    clearable 
                    @on-enter="sendLogs"
                    :disabled="Sloading||Tloading"
                  />
                </Col>
                <Col :span="2" >
                  <Button type="primary" shape="circle" class="relative width100" style="top:3px;" @click="sendLogs" :loading="Sloading" >{{Sloading?'':'发 送'}}</Button>
                </Col>
                <Col :span="2" class="textCenter">
                  <div class="relative overflowH" style="height:35px;">
                    <Button type="default" shape="circle" class="relative width100" :loading="Tloading"  style="top:3px;">{{Tloading?'':'文 件'}}</Button>
                    <input
                      type="file" ref="fA"
                      class="InputFileBox   "
                      style="height:40px;"
                      accept=".zip, .rar, .pdf, .docx, .doc, .jpeg , .jpg , .png"
                      multiple
                      @change="fileUp($event)"
                      v-show="!Tloading"
                    />
                  </div>
                  <Icon type="ios-help-circle-outline" class="cCCC pointer" @click="$app.alert('请上传'+100+'MB以下的文件：压缩包 / 图片 / word / pdf','格式限制')"/>
                </Col>
            </Row>
            
          </div>
          
          

        </div>
      
    </Modal>

  </div>
</template>


<style lang="less" scoped>

.liuYanBox{
  border: 1px solid #ccc;
  border-radius: 5px;
  word-wrap: break-word; // 只对英文起作用，以单词作为换行依据。
  .yanBox{
    padding:10px 20px;
    min-height: 200px;
    overflow-y:auto;
    .huiFuBox{
      font-size: 14px;
      line-height: 2;
      border:1px solid #ccc ;
      padding:3px 10px;
      border-radius: 5px;
      display: inline-block;
      word-break:break-all;
      word-wrap:break-word;
    }
    .zuHe{
      margin-bottom: 20px;
    }
    .zuHe:last-of-type{
      margin-bottom: 0;
    }
  }
  .yanBottom{
    padding:10px;
    border-top:1px solid #ccc;
  }

}
</style>

<script>
import logoMin2 from '@$@/img/_logo-min2.png';
export default {
  name: "liuYanKk",
  components: {},
  props: ["orderInfo", "orLiInfo"],
  data() {
    let data = {
      logoMin2,//猫logo
      contactLogs:[],//撰写聊天记录
      liuYanKk:false,//留言框，显示隐藏
      Sloading:false,//发送按钮 的转转
      Tloading:false,//文件按钮 的转转
      sendLogsVal:''//留言文字内容
      
    };
    let tool = {

    };
    return Object.assign(data, tool);
  },
  watch: {
  },
  mounted() {
    
  },
  methods: {

    // 发送留言
    sendLogs(){
      let {
        sendLogsVal,
        $route:{
          query:{
            order_id
          }
        }
      }=this;

      if($app.judgeData($app.delSpace(sendLogsVal))){
        this.Sloading=true;
        //msg_type:1文字,2图片,3附件
        $ajax.WriteAddContactLog(order_id,1,sendLogsVal,'',resData=>{
          this.sendLogsVal='';//清空输入框

          $app.showLoading=false;
          // 获取留言信息
          this.huoQuLY();
        },resData=>{
          this.Sloading=false;
        });
      }else{
        $app.alert('请输入留言内容','温馨提示',()=>{
          this.sendLogsVal='';
          this.$refs['sendLogsVal'].focus();
        });
      }
    },

    // 获取留言
    huoQuLY(){
      let {
        $route:{
          query:{
            order_id
          }
        }
      }=this;
      // 获取留言信息
      $ajax.WriteContactLogs(order_id,resData=>{
        if($app.judgeData(resData.list)){
          this.contactLogs=resData.list;
          // 滚动到底部
          this.$nextTick(() => {//DOM现在更新了
            setTimeout(()=>{
              let ele = this.$refs['yanBox'];
              ele.scrollTop = ele.scrollHeight;
            },50);
          });
        }

        this.Tloading=false;
        this.Sloading=false;
        
      },()=>{
        this.Tloading=false;
        this.Sloading=false;
      });
    },
    vAhange(buEr){
      if(buEr){
        // 获取留言信息
        this.huoQuLY();
        
      }
      
    },
    //上传
    fileUp(e) {

      // 文件循环 循环到，最后一个儿子时，会执行 e.target.value='';//清空input file的值
      $app.suffixEach(e,file=>{

        // 大小判断 必须小于100mb
        $app.fileSizeCheck(file,100,()=>{
          let string=$app.toLower(file.name);//取文件后后缀名
          
          if(/(jpeg|jpg|png)$/i.test(string)){//图片
            this.Tloading=true;
            $app.showLoading=false;
            $app.selectFileImage(null,null,file,23,resData=>{
              this.fileUp_Ok(resData,2); //2图片,3附件
            },()=>{
              this.Tloading=false;
            });
          }else if(/(zip|rar|docx|doc|pdf)$/i.test(string)){//附件
            this.Tloading=true;
            $app.showLoading=false;
            $ajax.upOther(file,23,resData => {
              this.fileUp_Ok(resData,3); //2图片,3附件
            },()=>{
              this.Tloading=false;
            });
          }else{
            $app.toast('请上传：压缩包 / 图片 / word / pdf',false);
          }
        });
        
      });

    },

    fileUp_Ok({file_path},num){

      let {
        $route:{
          query:{
            order_id
          }
        }
      }=this;

      //msg_type:1文字,2图片,3附件
      $ajax.WriteAddContactLog(order_id,num,'',file_path,resData=>{
        $app.showLoading=false;
        this.huoQuLY();// 获取留言信息
      });

    }
  }
};
</script>

